<template>
	<view class="lottery-rows">
		<view class="lottery-rows__box">
			<view class="lottery-rows__head">
				<text>抽奖码兑换</text>
			</view>
			<view class="lottery-money__number">
				<view class="num">
					<view class="jian" @click="handleJian">
						<image src="https://wx.2024csnl.com/static/lottery/lottery-11.png" />
					</view>
					<view class="input">
						<input v-model="money" type="tel" disabled maxlength="5" placeholder="" @input="handleInput" />
						<text class="unitTip">次</text>
					</view>
					<view class="jia" @click="handleJia">
						<image src="https://wx.2024csnl.com/static/lottery/lottery-12.png" />
					</view>
				</view>
				<view class="button">
					<button @click="handleOK">立即兑换</button>
				</view>
			</view>
			<view style="padding-top: 20px; text-align: center;">
				<text style="text-align: center; color: #999;">
					抽奖码兑换比例为1:2
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: '1'
			}
		},
		props: {
			info: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		methods: {
			handleInput() {
				this.money = this.formatNumber(Number(this.money))
			},
			handleOK() {
				this.$emit('ok', this.money)
			},
			handleJia() {
				this.money = Number(this.money) + 1
			},
			handleJian() {
				if (this.money <= 1) return false
				this.money = Number(this.money) - 1
			},
			formatNumber(value) {
				if (typeof value === 'number' && !isNaN(value)) {
					return value
				} else {
					return 0
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.lottery-rows {
		position: relative;
		padding: 0 3vw 5vw;

		.lottery-rows__box {
			position: relative;
			background: -webkit-linear-gradient(top, #ffffff, #ffe6c8);
			border: 5px solid #f39800;
			border-radius: 20px;
			padding: 0 20px 20px;
		}

		.lottery-rows__head {
			position: relative;
			height: 40px;
			line-height: 40px;
			margin: 0 15% 20px;
			text-align: center;
			background: url('https://wx.2024csnl.com/static/lottery/lottery-7.png') center center no-repeat;
			background-size: 100% 100%;

			text {
				font-size: 15px;
				font-weight: normal;
				color: #ffffff;
			}
		}

		.lottery-rows__tab {
			position: relative;
			margin: 0 10% 20px;
			display: flex;

			.item {
				flex: 1;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-10a.png') center center no-repeat;
				background-size: 100% 100%;
				text-align: center;

				&.is-active {
					background-image: url('https://wx.2024csnl.com/static/lottery/lottery-10b.png');

					&:first-child {
						background-image: url('https://wx.2024csnl.com/static/lottery/lottery-8b.png');
					}

					&:last-child {
						background-image: url('https://wx.2024csnl.com/static/lottery/lottery-9b.png');
					}

					span {
						color: #ffffff;
					}
				}

				&:first-child {
					background-image: url('https://wx.2024csnl.com/static/lottery/lottery-8a.png');
					padding-left: 10px;
				}

				&:last-child {
					background-image: url('https://wx.2024csnl.com/static/lottery/lottery-9a.png');
					padding-right: 10px;
				}

				span {
					display: block;
					height: 40px;
					line-height: 40px;
					font-size: 15px;
					color: #ad3515;
				}
			}
		}
	}

	.lottery-money__number {
		display: flex;

		.num {
			flex: 1;
			position: relative;
			display: flex;
			margin: 0 20px 0 0;
		}

		.jian,
		.jia {
			image {
				display: block;
				width: 30px;
				height: 30px;
			}
		}

		.input {
			position: relative;
			flex: 1;
			display: flex;
			flex-direction: row;
			padding: 0 10px;

			input {
				vertical-align:middle;
				display: inline-block;
				height: 30px;
				line-height: 30px;
				border-radius: 30px;
				border: 1px solid #f19149;
				color: #c20800;
				text-align: center;
			}

			text {
				margin-left: 2rpx;
				vertical-align:middle;
				display: inline-block;
				height: 30px;
				line-height: 30px;
				text-align: center;
			}
			.unitTip {
				vertical-align:middle;
				display: inline-block;
				height: 30px;
				line-height: 30px;
				text-align: center;

				span {
					vertical-align:middle;
					display: inline-block;
					height: 30px;
					line-height: 30px;
					text-align: center;
				}
			}
		}

		.button {
			width: 100px;

			button {
				width: 100%;
				height: 30px;
				line-height: 30px;
				border: 0;
				color: #ffffff;
				border-radius: 30px;
				background: -webkit-linear-gradient(left, #f52a7e, #ff5919);
			}
		}
	}
</style>